
import { useEffect, useState } from "react"
import { Row, Col, Carousel } from "antd"
import { connect } from "react-redux"
import { getAnnoList } from "../../redux/actions"
import { baseURL } from "../../api/request"



function Home({ list, dispatch }) {
  const [index, setIndex] = useState(0)
  useEffect(() => {
    dispatch(getAnnoList())
  }, [])
  const onChange = (index) => {
    setIndex(index)
  }
  return (
    <div>
      <h2>系统首页</h2>
      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={18} style={{ display: 'flex' }}>
          <Carousel autoplay={true} afterChange={onChange} style={{ width: 600, height: 300, position: "relative" }}>
            {
              list && list.map((l, i) => {
                return (
                  <div key={i} style={{ width: 600, height: 300, position: "relative" }}>
                    <img src={l.desc.replace(/public/, baseURL)} alt="" style={{ width: 600, height: 300, position: "relative" }} />

                  </div>
                )
              })
            }
          </Carousel>
          {
            list[index] && <div style={{ pointerEvents: 'none', color: "deeppink", fontSize: 40, zIndex: 100000, width: 600, height: 300, position: "absolute", top: 0, left: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
              <p>{list[index].title}</p>
              <p>{list[index].content}</p>
            </div>
          }
        </Col>
      </Row>
    </div>
  )
}

export default connect(
  state => ({
    list: state.getIn(["data", "annoList"]).slice(0, 4)
  })
)(Home)